<template>
	<div>
		<h1>图标</h1>
		<el-row>
			<el-col :span="8">
				<myEcharts :options="options" width="100%" height="500px"></myEcharts>
			</el-col>
			<el-col :span="8">
				<myEcharts :options="options1" width="100%" height="500px"></myEcharts>
			</el-col>
		</el-row>
	</div>
</template>


<script lang="ts" setup>
import myEcharts from '@/components/myEcharts/index.vue'
import { useStore } from 'vuex'
import { RootState } from '@/store'

const store = useStore<RootState>()

const data = ['待发货', '待付款', '已完成', '已发货', '已关闭']
const data1 = [0, 0, 0, 0, 0]

store.state.list.forEach(v => {
	const i = data.indexOf(v.state)
	data1[i]++
})

const options = {
	title: {
		text: '支付方式'
	},
	tooltip: {},
	xAxis: {
		data
	},
	yAxis: {},
	series: [
		{
			name: '销量',
			type: 'bar',
			data: data1
		}
	]
}

const options1 = {
	title: {
		text: 'Referer of a Website',
		subtext: 'Fake Data',
		left: 'center'
	},
	tooltip: {
		trigger: 'item'
	},
	legend: {
		orient: 'vertical',
		left: 'left'
	},
	series: [
		{
			name: 'Access From',
			type: 'pie',
			radius: '50%',
			data: [
				{ value: 1048, name: 'Search Engine' },
				{ value: 735, name: 'Direct' },
				{ value: 580, name: 'Email' },
				{ value: 484, name: 'Union Ads' },
				{ value: 300, name: 'Video Ads' }
			],
			emphasis: {
				itemStyle: {
					shadowBlur: 10,
					shadowOffsetX: 0,
					shadowColor: 'rgba(0, 0, 0, 0.5)'
				}
			}
		}
	]
}
</script>

<style scoped></style>